F<template>
  <div id="mapGeo" ref="ele" style="position: relative;margin-top: 3px;width: 100%;height: 100%">
    <!--右上工具栏-->
    <div class="mapTools dropdown-ctrl" v-if="isTools">
      <el-dropdown :hide-on-click="false" @command="fastScaleSkip">
        <el-button type="primary" style="padding: 0 10px;height: 30px;line-height: 30px;border-radius: 0;background:rgba(15,114,195,1);border-color: rgba(0,0,0,0);border-right: 1px solid rgba(255,255,255,0.40)">
          比例尺<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown"  style="background:rgba(15,114,195,.6);" class="dropdownMenu">
            <el-dropdown-item :command="18" style="color: #FFFFFF">1 : 50</el-dropdown-item>
            <el-dropdown-item :command="15" style="color: #FFFFFF">1 : 500</el-dropdown-item>
            <el-dropdown-item :command="14" style="color: #FFFFFF">1 : 1000</el-dropdown-item>
            <el-dropdown-item :command="12" style="color: #FFFFFF">1 : 5000</el-dropdown-item>
            <el-dropdown-item :command="10" style="color: #FFFFFF">1 : 10000</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown :hide-on-click="false" @command="toolPlot">
        <el-button type="primary" style="padding: 0 10px;height: 30px;line-height: 30px;border-radius: 0;background:rgba(15,114,195,1);border-color: rgba(0,0,0,0);border-right: 1px solid rgba(255,255,255,0.40)">
          标绘<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown"  style="background:rgba(15,114,195,.6);" class="dropdownMenu">
            <el-dropdown-item command="Point">
              <img :src="menu[0].icon" style="width: 15px;height: 15px;"/>
              <span style="font-size: 12px;color: #FFFFFF">{{menu[0].text}}</span>
            </el-dropdown-item>
            <el-dropdown-item command="LineString">
              <img :src="menu[2].icon" style="width: 15px;height: 15px;"/>
              <span style="font-size: 12px;color: #FFFFFF">{{menu[1].text}}</span>
            </el-dropdown-item>
            <el-dropdown-item command="Polygon">
              <img :src="menu[1].icon" style="width: 15px;height: 15px;"/>
              <span style="font-size: 12px;color: #FFFFFF">{{menu[2].text}}</span>
            </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown :hide-on-click="false" @command="measure">
        <el-button type="primary" style="padding: 0 10px;height: 30px;line-height: 30px;border-radius: 0;background:rgba(15,114,195,1);border-color: rgba(0,0,0,0);border-right: 1px solid rgba(255,255,255,0.40)">
          测量<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown"  style="background:rgba(15,114,195,.6);" class="dropdownMenu">
          <el-dropdown-item command="LineString">
            <img :src="menu[3].icon" style="width: 15px;height: 15px;"/>
            <span style="font-size: 12px;color: #FFFFFF">{{menu[3].text}}</span>
          </el-dropdown-item>
          <el-dropdown-item command="Polygon">
            <img :src="menu[5].icon" style="width: 15px;height: 15px;"/>
            <span style="font-size: 12px;color: #FFFFFF">{{menu[4].text}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown :hide-on-click="false">
        <el-button type="primary" style="padding: 0 10px;height: 30px;line-height: 30px;border-radius: 0;background:rgba(15,114,195,1);border-color: rgba(0,0,0,0);border-right: 1px solid rgba(255,255,255,0.40)">
          工具<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown"  style="background:rgba(15,114,195,.6);" class="dropdownMenu">
          <el-dropdown-item>
            <div @click="pickupCoord">
              <img :src="menu[4].icon" style="width: 15px;height: 15px;"/>
              <span style="font-size: 12px;color: #FFFFFF">{{menu[5].text}}</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="locationShow = true">
              <img :src="menu[6].icon" style="width: 15px;height: 15px;"/>
              <span style="font-size: 12px;color: #FFFFFF">{{menu[6].text}}</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown v-if="module==='command'" :hide-on-click="false">
        <el-button type="primary">
          图层<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" class="checkbox menu" style="background:rgba(15,114,195,1);">
          <el-checkbox-group v-model="layerCheckList" v-for="(item,index) in customLayers" :key="index" @change="checkLayer">
            <el-dropdown-item><el-checkbox :label="item.id">{{item.name}}</el-checkbox></el-dropdown-item>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 全屏-->
      <div id="mapFull" @click="full = !full" :class="full?'full': 'small'" style="cursor: pointer;margin-left: 5%"></div>
    </div>
    <!-- 右下角坐标显示 -->
    <div style="position: absolute;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.3);width: 250px;height: 25px;z-index: 100;" v-if="isCoord">
      <div id="mouse-position" style="text-align: center;color: white;line-height: 25px;padding-right: 10px;"></div>
    </div>
    <!-- 右下角比例尺显示 -->
    <div style="position: absolute;right: 280px;bottom: 5px;z-index: 100;" v-if="isRuler">
      <div id="scaleLineControl" style="position: relative;line-height: 25px;border-bottom: 2px solid #fff;text-align: center;color: #FFF;"></div>
      <div style="position: absolute;left: 0;top: 21px;height: 8px;border-left: 2px solid #FFF"></div>
      <div style="position: absolute;right: 0;top: 21px;height: 8px;border-left: 2px solid #FFF"></div>
    </div>

    <!--底图切换 -->
    <div style="position: absolute;right: 10px; bottom: 30px;display: flex;height: 100px;z-index: 100;color: #FFF;" v-if="isMapCut">
      <div v-for="(item, i) in mapType" :key="i" class="mapType" @click="mapTypeIndex = i" @mouseenter="allTypeShow = true"
           @mouseleave="allTypeShow = false" v-show="mapTypeIndex === i || allTypeShow" :class="allTypeShow === false?'padingR5': ''"
           style="position: relative;">
        <img :src="item.photo" @click="switchMap(item.type)"/>
        <div class="mapTypeText" :class="{'textWidth': i === 2}">{{item.text}}</div>
      </div>
    </div>

    <!-- 坐标定位弹窗 -->
    <div v-show="locationShow" class="location">
      <i class="el-icon-close" style="position: absolute;width: 30px;height: 30px;background-color: rgba(0,0,0,0.4);right: 0;
        top: 3px;line-height: 30px;text-align: center;cursor: pointer;" @click="locationShow = false"></i>
      <div class="locationTitle">坐标定位</div>
      <div style="margin-top: 10px;padding: 5px 12px 10px;text-align: center; background:rgba(15,114,195,1);">
        <el-form  :inline="true" style="margin-bottom: 0;" label-width="50">
          <el-form-item label="经度">
            <el-input v-model="longitude" size="small"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="latitude" size="small"></el-input>
          </el-form-item>
        </el-form >
        <div class="locationBtn" @click="toLocation">定位</div>
      </div>
    </div>
  </div>
</template>

<script>

import mapTypeIcon1 from '../assets/img/map/dianzi.png'
import mapTypeIcon2 from '../assets/img/map/dixing.png'
import mapTypeIcon3 from '../assets/img/map/yingxing.png'
import iconMapToPlace from '../assets/img/map/mapToPlace.png'
import toolIcon1 from '../assets/img/map/toolIcon01.png'
import toolIcon2 from '../assets/img/map/toolIcon02.png'
import toolIcon3 from '../assets/img/map/toolIcon03.png'
import toolIcon4 from '../assets/img/map/toolIcon04.png'
import toolIcon5 from '../assets/img/map/toolIcon05.png'
import toolIcon6 from '../assets/img/map/toolIcon06.png'
import toolIcon7 from '../assets/img/map/toolIcon07.png'
import toolIconFull from '../assets/img/map/full.png'

import GlobalMap from './GlobalMap'
import Map from 'ol/Map'
import {FullScreen, MousePosition, ScaleLine} from 'ol/control.js'
import {defaults as defaultInteractions, Draw, Modify, Snap, Select, Translate} from 'ol/interaction.js'
import {createStringXY, toStringHDMS, format as formatCoordinate} from 'ol/coordinate'
import BaseLayer from 'ol/layer/Base'
import Overlay from 'ol/Overlay.js'
import {unByKey} from 'ol/Observable.js'
import {LineString, Polygon, Point} from 'ol/geom.js'
import {getArea, getLength} from 'ol/sphere.js'
import {fromLonLat} from 'ol/proj.js'
import Feature from 'ol/Feature'

import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'
import LayerGroup from 'ol/layer/Group'
import {XYZ, Vector as VectorSource} from 'ol/source.js'
import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style.js'

export default {
  name: 'OLMap',
  props: ['module', 'isTools', 'isMapCut', 'isCoord', 'isRuler'],
  data: function () {
    return {
      clientHeight: '',

      mapTypeIndex: 2,
      allTypeShow: false,
      mapType: [{
        photo: mapTypeIcon1,
        text: '电子',
        type: 'tdtDZ'
      }, {
        photo: mapTypeIcon2,
        text: '地形',
        type: 'tdtDX'
      }, {
        photo: mapTypeIcon3,
        text: '影像',
        type: 'googleYX'
      }],
      customLayers: [], // 自定义layers,引用扩展时存放图层
      baseLayers: [],
      toolLayers: [],
      map: null,
      draw: null,
      menu: [{
        icon: toolIcon1,
        text: '点'
      }, {
        icon: toolIcon2,
        text: '线'
      }, {
        icon: toolIcon3,
        text: '面'
      }, {
        icon: toolIcon4,
        text: '量距'
      }, {
        icon: toolIcon5,
        text: '量面'
      }, {
        icon: toolIcon6,
        text: '拾取'
      }, {
        icon: toolIcon7,
        text: '定位'
      }, {
        icon: toolIconFull,
        text: ''
      }],
      full: false,
      // 标绘图层
      vrSource_plot: null,
      vrLayer_plot: null,
      helpMsg: '单击绘制',
      // 测量图层
      vrSource_measure: null,
      vrLayer_measure: null,
      // -----测量数值Overlay------
      measureTooltipElement: null, // The measure tooltip element
      measureTooltip: null, // Overlay to show the measurement
      // -----测量帮助提示Overlay------
      helpTooltipElement: null, // The help tooltip element
      helpTooltip: null, // Overlay to show the help messages
      mousePositionControl: null, // 鼠标坐标控件
      // 定位图层
      vrSource_toPlace: null,
      vrLayer_toPlace: null,
      locationShow: false,
      longitude: 0,
      latitude: 0
    }
  },
  // dom加载后调用
  mounted () {
    this.initMap()
  },
  created () {
    this.clientHeight = `${document.documentElement.clientHeight}` // 获取浏览器可视区域高度
  },
  methods: {
    // 初始地图
    initMap () {
      let mapLayers = []
      // 构建底图数据源
      for (let i = 0; i < GlobalMap.mapTypeSource.length; i++) {
        this.baseLayers.push(new TileLayer({
          layerId: GlobalMap.mapTypeSource[i].layerId,
          source: new XYZ({
            url: GlobalMap.mapTypeSource[i].url
          }),
          zIndex: GlobalMap.mapTypeSource[i].zIndex,
          visible: GlobalMap.mapTypeSource[i].visible
          // extent: [left, bottom, right, top]
          // minResolution，图层可见的最小分辨率，当图层的缩放级别小于这个分辨率时，图层就会隐藏；
          // maxResolution，图层可见的最大分辨率，当图层的缩放级别等于或超过这个分辨率时，图层就会隐藏。
        })
        )
      }
      let baseLayerGroup = new LayerGroup({
        layers: this.baseLayers
      })
      mapLayers.push(baseLayerGroup)

      // 矢量标绘图层初始
      this.vrSource_plot = new VectorSource({wrapX: false})
      this.vrLayer_plot = new VectorLayer({
        layerId: 'vrLayer_plot',
        title: '标绘图层',
        source: this.vrSource_plot,
        style: new Style({
          // 矢量图层填充颜色,以及透明度
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          // 边界样式
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          // 文本样式
          text: new Text({
            font: '12px Calibri,sans-serif',
            fill: new Fill({
              color: '#000'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 3
            })
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        }),
        zIndex: 2
      })
      this.toolLayers.push(this.vrLayer_plot)
      // 测量图层初始
      this.vrSource_measure = new VectorSource({wrapX: false})
      this.vrLayer_measure = new VectorLayer({
        layerId: 'vrLayer_measure',
        title: '测量图层',
        source: this.vrSource_measure,
        style: new Style({
          // 矢量图层填充颜色,以及透明度
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          // 边界样式
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          // 文本样式
          text: new Text({
            font: '12px Calibri,sans-serif',
            fill: new Fill({
              color: '#000'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 3
            })
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        }),
        zIndex: 2
      })
      this.toolLayers.push(this.vrLayer_measure)
      // 定位图层初始
      this.vrSource_toPlace = new VectorSource({features: []})
      this.vrLayer_toPlace = new VectorLayer({
        layerId: 'vrLayer_toPlace',
        title: '定位图层',
        zIndex: 2,
        source: this.vrSource_toPlace
      })
      this.toolLayers.push(this.vrLayer_toPlace)

      let toolLayerGroup = new LayerGroup({
        layers: this.toolLayers
      })
      mapLayers.push(toolLayerGroup)

      // 监听鼠标位置控件
      this.mousePositionControl = new MousePosition({
        coordinateFormat: createStringXY(5),
        projection: 'EPSG:4326',
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
      })

      // let select = new Select()
      //
      // let translate = new Translate({
      //   features: select.getFeatures()
      // })

      let mapFull = new FullScreen({
        target: 'mapFull',
        label: '',
        labelActive: '',
        tipLabel: '点击全屏地图'
      })
      // 比例尺
      let scaleLine = new ScaleLine({
        // className: '',
        target: 'scaleLineControl',
        units: 'metric'
      })

      this.map = new Map({
        target: 'mapGeo',
        controls: ([
        ]),
        // interactions: defaultInteractions().extend([select, translate]),
        loadTilesWhileAnimating: true,
        loadTilesWhileInteracting: true,
        layers: mapLayers,
        view: GlobalMap.mapView
      })

      if (this.isTools) this.map.addControl(mapFull)
      if (this.isRuler) this.map.addControl(scaleLine)
      if (this.isCoord) this.map.addControl(this.mousePositionControl)

      this.map.on('pointermove', this.pointerMovePointer)

      let mapObj = this.map
      this.$emit('ready', mapObj)
    },
    // 事件:鼠标移动至有内容处变手型
    pointerMovePointer (evt) {
      if (evt.dragging) {
        return
      }
      let pixel = this.map.getEventPixel(evt.originalEvent)
      let hit = this.map.hasFeatureAtPixel(pixel, 0)
      this.map.getTargetElement().style.cursor = hit ? 'pointer' : ''
    },
    // 事件:鼠标移动帮助提示
    pointerMoveHandler (evt) {
      if (evt.dragging) {
        return
      }
      let helpMsg = this.helpMsg
      this.helpTooltipElement.innerHTML = helpMsg
      this.helpTooltip.setPosition(evt.coordinate)
      this.helpTooltipElement.classList.remove('hidden')
    },
    // 图层置顶
    layerTop (mapLayer, isVisible) {
      let maxZIndex = 2
      this.map.getLayers().forEach(function (layer, i) {
        if (layer instanceof LayerGroup) {
          layer.getLayers().forEach(function (sublayer, j) {
            let zIndex = sublayer.getZIndex()
            if (zIndex && zIndex > maxZIndex) maxZIndex = zIndex
          })
        } else if (layer instanceof BaseLayer) {
          let zIndex = layer.getZIndex()
          if (zIndex && zIndex > maxZIndex)maxZIndex = zIndex
        }
      })
      if (mapLayer.getZIndex() !== maxZIndex) {
        mapLayer.setVisible(isVisible)
        mapLayer.setZIndex(maxZIndex + 1)
      }
    },
    // 切换底图
    switchMap (source) {
      for (let i = 0; i < this.baseLayers.length; i++) {
        if (this.baseLayers[i].values_.layerId === source) {
          this.baseLayers[i].values_.visible = true
        } else {
          this.baseLayers[i].values_.visible = false
        }
      }
      this.map.render()
    },
    // 切换比例尺
    fastScaleSkip (scaleLevelVal) {
      if (scaleLevelVal && scaleLevelVal > 0) {
        this.map.getView().animate({
          zoom: scaleLevelVal
        })
      }
    },
    // 标绘工具
    toolPlot (typeShp) {
      // 置顶操作图层
      this.layerTop(this.vrLayer_plot, true)

      let msg = typeShp === 'Point' ? '单击标绘' : '长按标绘'
      this.helpMsg = msg
      this.createHelpTooltip()
      let mapMove = this.map.on('pointermove', this.pointerMoveHandler)

      this.draw = new Draw({
        source: this.vrSource_plot,
        type: typeShp,
        freehand: true
      })
      this.map.addInteraction(this.draw)
      this.snap = new Snap({source: this.vrSource_plot})
      this.map.addInteraction(this.snap)

      let dom = this
      this.draw.on('drawend', function () {
        dom.map.removeInteraction(dom.draw)
        dom.draw = null
        dom.map.removeInteraction(dom.snap)
        dom.snap = null

        unByKey(mapMove)
        // 清掉overlay，里面的dom也会清掉
        dom.map.removeOverlay(dom.helpTooltip)
      }, this)

      this.modify = new Modify({source: this.vrSource_plot})
      this.map.addInteraction(this.modify)
    },
    // 测量工具
    measure (typeMeasure) {
      // 置顶操作图层
      this.layerTop(this.vrLayer_measure, true)

      this.createMeasureTooltip()
      this.createHelpTooltip()

      let dom = this // 引用外部

      this.helpMsg = '单击测量'
      // 绑定鼠标悬浮监听
      let onMove = this.map.on('pointermove', this.pointerMoveHandler)

      if (this.draw) {
        this.map.removeInteraction(this.draw)
        this.draw = null
      }
      this.draw = new Draw({
        source: this.vrSource_measure,
        type: typeMeasure,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new Stroke({
            color: '#ff0307',
            lineDash: [10, 10],
            width: 2
          }),
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.7)'
            }),
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            })
          })
        })
      })
      this.map.addInteraction(this.draw)

      let listener
      this.draw.on('drawstart', function (evt) {
        dom.sketch = evt.feature
        let tooltipCoord = evt.coordinate

        listener = dom.sketch.getGeometry().on('change', function (evt) {
          let geom = evt.target
          let output
          if (geom instanceof Polygon) {
            output = dom.formatArea(geom)
            tooltipCoord = geom.getInteriorPoint().getCoordinates()
          } else if (geom instanceof LineString) {
            output = dom.formatDist(geom)
            tooltipCoord = geom.getLastCoordinate()
          }
          dom.measureTooltipElement.innerHTML = output
          dom.measureTooltip.setPosition(tooltipCoord)
        })
      }, this)

      this.draw.on('drawend', function () {
        dom.measureTooltipElement.className = 'tooltip tooltip-static'
        dom.measureTooltip.setOffset([0, -7])
        dom.sketch = null
        dom.measureTooltipElement = null
        dom.createMeasureTooltip()
        unByKey(listener)

        unByKey(onMove)
        dom.map.removeInteraction(dom.draw)
        // 清掉overlay，里面的dom也会清掉
        dom.map.removeOverlay(dom.helpTooltip)
      }, this)
    },
    // 拾取坐标
    pickupCoord () {
      this.helpMsg = '单击拾取'
      this.createHelpTooltip()
      this.map.on('pointermove', this.pointerMoveHandler)
      this.map.on('singleclick', this.singleClickGetCoor)
    },
    // 定位
    toLocation () {
      // 置顶操作图层
      this.layerTop(this.vrLayer_toPlace, true)

      if (this.checkCoord(this.longitude, this.latitude)) {
        let place = fromLonLat([this.longitude, this.latitude], 'EPSG:4326')
        let iconStyle = new Style({
          image: new Icon(({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: iconMapToPlace
          }))
        })
        let iconFeature = new Feature({
          geometry: new Point(place),
          name: this.longitude + ',' + this.latitude,
          population: 4000,
          rainfall: 500
        })
        iconFeature.setStyle(iconStyle)
        this.vrSource_toPlace.addFeature(iconFeature)
        this.map.getView().animate({
          center: place
        })
      } else {
        this.$notify({
          title: '提示',
          message: '请输入正确的坐标!',
          position: 'bottom-right',
          type: 'warning'
        })
      }
    },
    // 悬浮提示
    createHelpTooltip () {
      if (this.helpTooltipElement) {
        this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement)
      }
      this.helpTooltipElement = document.createElement('div')
      this.helpTooltipElement.className = 'tooltip hidden'
      this.helpTooltip = new Overlay({
        element: this.helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left'
      })
      this.map.addOverlay(this.helpTooltip)
    },
    // 单击事件显示坐标
    singleClickGetCoor (evt) {
      let dom = this
      if (evt.dragging) {
        return
      }
      let coordinate = evt.coordinate
      let hdms = toStringHDMS(coordinate)
      let container = document.createElement('div')
      container.className = 'ol-popup'
      let content = document.createElement('div')
      let closer = document.createElement('i')
      let top = document.createElement('div')
      content.className = 'ol-popup-code'
      closer.className = 'ol-popup-closer el-icon-close'
      top.className = 'popup-triangle-top'
      // content.innerHTML = '<p>拾取坐标：</p><code>经纬:' + hdms.substring(hdms.indexOf('N') + 1, hdms.length) + ' ' + hdms.substring(0, hdms.indexOf('N ') + 1) + '</code>' +
      //   '<br /><code>' + formatCoordinate(coordinate, '84坐标:{x},{y}', 5) + '</code>'
      content.innerHTML = '<p style="position: relative;margin-bottom:10px;left:3px;top: 3px;background-color: rgba(250, 250, 250, 0.2);width:calc(100% - 3px);height:30px;line-height: 30px;padding-left: 10px;box-sizing: border-box">拾取坐标：</p><code style="padding: 0 10px;font-size: 1.8rem;line-height: 30px">经纬:' + hdms.substring(hdms.indexOf('N') + 1, hdms.length) + ' ' + hdms.substring(0, hdms.indexOf('N ') + 1) + '</code>' +
        '<br /><code style="padding: 0 10px;font-size: 1.8rem;line-height: 28px">' + formatCoordinate(coordinate, '84坐标:{x},{y}', 5) + '</code>'
      container.appendChild(closer)
      container.appendChild(content)
      container.appendChild(top)

      let overlay = new Overlay(({
        position: coordinate,
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      }))
      closer.onclick = function () {
        dom.map.removeOverlay(overlay)
        closer.blur()
        return false
      }
      dom.map.addOverlay(overlay)
      dom.map.removeOverlay(dom.helpTooltip)

      dom.map.getView().animate({
        center: coordinate
      })
      dom.map.un('singleclick', dom.singleClickGetCoor)
    },
    // 量距量面计量提示
    createMeasureTooltip () {
      if (this.measureTooltipElement) {
        this.measureTooltipElement.parentNode.removeChild(this.measureTooltipElement)
      }
      this.measureTooltipElement = document.createElement('div')
      this.measureTooltipElement.className = 'tooltip tooltip-measure'
      this.measureTooltip = new Overlay({
        element: this.measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
      })
      this.map.addOverlay(this.measureTooltip)
    },
    // 格式化距离
    formatDist (line) {
      let length = getLength(line, {projection: 'EPSG:4326'})
      let output
      if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) +
          ' ' + 'km'
      } else {
        output = (Math.round(length * 100) / 100) +
          ' ' + 'm'
      }
      return output
    },
    // 格式化面积
    formatArea (polygon) {
      let area = getArea(polygon, {projection: 'EPSG:4326'})
      let output
      if (area > 10000) {
        output = (Math.round(area / 1000000 * 100) / 100) +
          ' ' + 'km<sup>2</sup>'
      } else {
        output = (Math.round(area * 100) / 100) +
          ' ' + 'm<sup>2</sup>'
      }
      return output
    },
    // 坐标校验
    checkCoord (lon, lat) {
      let lonReg = /^(|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,20})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,20}|180)$/
      let latReg = /^(|\+)?([0-8]?\d{1}\.\d{0,20}|90\.0{0,20}|[0-8]?\d{1}|90)$/
      if (lonReg.test(lon) && latReg.test(lat)) {
        return true
      } else {
        return false
      }
    }

  }

}
</script>

<style scoped lang="less">
  #mapGeo /deep/ .tooltip{
    /*长按标绘  等*/
    font-size: 2rem;
    color: #FFFFFF;
  }
  #mapGeo /deep/ .ol-popup{
    /*整个弹框*/
    background:rgba(15,114,195,1);
    color: #FFFFFF;
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 10px;
  }
  #mapGeo /deep/ .el-icon-close{
    /*关闭按钮*/
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }
  #mapGeo /deep/ .ol-popup-code {
    background:rgba(15,114,195,1);
  }
  #mapGeo /deep/ .ol-popup-code p{
    font-size: 1.8rem;
    color: #FFFFFF;
  }
  .full{
    /*background: url("../assets/img/map/full.png") 6px 6px no-repeat;*/
  }
  .small{
    /*background: url("../assets/img/map/small.png") 6px 6px no-repeat;*/
  }
  .mapTools{
    position: absolute;
    z-index: 100;
    /*right: 25%;*/
    top: 20px;
    right: 1%;
    margin-right: 50px;
    /*width: 560px;*/
    height: 30px;
    display: flex;
  }
  .dropdownMenu /deep/ .el-dropdown-menu__item:not(.is-disabled):hover{
    background:#0d7ef6 !important;
  }
  .dropdownMenu /deep/.el-dropdown-menu__item:not(.is-disabled){
    /*解决子菜单点击后空白的问题*/
    /*background-color: transparent;*/
    background: none !important;
  }
  .mapType{
    width: 150px;
    height: 100px;
    cursor: pointer;
    margin-right: 0;
    /*padding: 5px 0 5px 5px;*/
    box-sizing: border-box;
    background-color: rgba(250, 250, 250, 0.3);
    /*border: 3px solid  rgba(250, 250, 250, 0.3);*/
    overflow: hidden;
    transition: all .3s;
    text-align: center;
    /*line-height: 100px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      display: inline-block;
      height: 96%;
      width: 96%;
    }
  }
  .mapType:hover{
    /*transform: scale(1.1);*/
    padding: 3px;
  }
  .mapType:last-child{
    /*padding-right: 5px;*/
  }
  .mapTypeText{
    position: absolute;
    left: 5px;
    bottom: 4px;
    width: calc(100% - 5px);
    height:20px;
    background: rgba(52, 52, 52, 0.7);
    line-height: 20px;
    text-align: center
  }
  .padingR5{
    /*padding-right: 5px;*/
  }
  .textWidth{
    width: calc(100% - 10px);
  }
  .location{
    position: fixed;
    left: calc(50% - 150px);
    top: calc(50% - 90px);
    width: 300px;
    height: 180px;
    /*background-image: linear-gradient(0deg, rgba(23, 120, 142, 0.80) 0%, rgba(58, 160, 149, 0.80) 100%);*/
    background:rgba(15,114,195,1);
    z-index: 100;
    color: #FFFFFF;
    padding-bottom: 15px;
  }
  .locationBtn{
    margin: 5px auto 0 auto;
    width: 80px;
    height: 30px;
    /*background-color: rgba(88, 190, 186, 0.8);*/
    background:#1690f3;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
  }
  .locationBtn:hover{
    /*background-color: rgba(88, 190, 186, 1);*/
    background-color: #1b88e1;
  }
  .locationTitle{
    width: calc(100% - 3px);
    margin: 3px 0 0 3px;
    height: 30px;
    font-size: 1.6rem;
    padding-left: 10px;
    line-height: 30px;
    background-color: rgba(250, 250, 250, 0.3);
    box-sizing: border-box
  }
  .ol-popup{
    width: 300px;
    background-image: linear-gradient(0deg, rgba(23, 120, 142, 0.80) 0%, rgba(58, 160, 149, 0.80) 100%);
    height: 90px;
    margin-top: 15px;
    margin-left: -30px;
  }
  .ol-popup-closer{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    z-index: 100;
    right: 0;
    top: 18px;
  }
  .popup-triangle-top{
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid rgba(58, 160, 149, 0.70);
  }
  .tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
  }
  .tooltip-measure {
    opacity: 1;
    font-weight: bold;
  }
  .tooltip-static {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
  }
  .tooltip-measure:before, .tooltip-static:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
  }
  .tooltip-static:before {
    border-top-color: #ffcc33;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #36c1af;
    border-color: #39bba8;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #36c1af;
    border-color: #39bba8;
  }
  .el-form--inline .el-form-item {
    margin-bottom: 5px;
  }
  .el-input__inner:focus{
    border-style: solid;
    border-color: #3abcb0;
  }
  .el-tree-node__content{
    padding-right: 5px;
  }
  .el-tree-node:focus>.el-tree-node__content{
    background-color: rgba(250, 250, 250, 0.2);
  }
  .dropdown-ctrl .el-button--primary{
    background-color: rgba(88, 190, 186, 0.6);
    border-color: rgba(88, 190, 186, 0.6)
  }
  .dropdown-ctrl .el-button--primary:hover{
    background-color: rgba(88, 190, 186, 0.8);
  }
  .dropdown-ctrl .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
    /*color: rgb(88, 190, 186);*/
    /*background-color: rgb(88, 190, 186);*/
    background:#0d7ef6
  }
  .el-radio__input.is-checked+.el-radio__label{
    color: rgba(250, 250, 250, 0.9);
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #0db3b3;
    background: #0db3b3;
  }
  #mapFull /deep/ .ol-full-screen-false{
    cursor: pointer;
    width: 30px;
    height: 30px;
    /*background-color:rgba(15,114,195,1);*/
    border: none;
    background: url("../assets/img/map/full.png") 6px 6px no-repeat;
  }
  #mapFull /deep/ .ol-control{
    background-color: rgba(15,114,195,1);
    width: 30px;
    height: 30px;
  }
  #mapFull /deep/ .ol-full-screen-true{
    cursor: pointer;
    width: 30px;
    height: 30px;
    /*background-color:rgba(15,114,195,1);*/
    border: none;
    background: url("../assets/img/map/small.png") 6px 6px no-repeat;
  }
</style>
